<template>
  <div class="page-work-my-profile">
    <el-form :model="form" ref="form" :rules="rules" :disabled="!editable">
      <div class="sub-title">基础信息</div>
      <div class="sub-form">
        <el-form-item label="身份类型">
          <el-radio-group v-model="userInfo.role" disabled size="small">
            <el-radio label="1" border>设计师</el-radio>
            <el-radio label="3" border>设计师及顾问</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item prop="userName">
          <el-input v-model="form.userName"></el-input>
        </el-form-item>
        <el-form-item>
          <el-select v-model="form.designerExperience" placeholder="选择设计经验" style="width: 100%">
            <el-option value="1" label="1年"></el-option>
            <el-option value="2" label="3年"></el-option>
            <el-option value="3" label="5年"></el-option>
            <el-option value="4" label="10年"></el-option>
            <el-option value="5" label="10年以上"></el-option>
          </el-select>
        </el-form-item>
        <!-- <div class="notetext">若不填写，系统自动抓取擅长空间（擅长空间与您上传的作品类别直接关联，如上传酒店类别的作品，系统将会自动为您添加#酒店#）</div> -->
      </div>

      <div class="sub-title">联系方式</div>
      <div class="sub-form">
        <el-form-item>
          <el-input v-model="userInfo.mobile" disabled></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="form.qqNumber" placeholder="QQ号"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="form.address" placeholder="请填写地址"></el-input>
        </el-form-item>
      </div>

      <div class="sub-title">个人介绍</div>
      <div class="sub-form">
        <el-form-item>
          <el-input v-model="form.desc1" placeholder="一句话介绍"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="form.desc2" placeholder="奖项与证书…………"></el-input>
        </el-form-item>
        <el-form-item label="请选择移动端主页">
          <el-tabs type="border-card" v-model="bannerType" class="form-block">
                <el-tab-pane label="选择封面" name="select">
                    <el-radio-group v-model="form.homePageUrl" class="radio-img-group">
                        <el-radio v-for="img in bannerUrls" :key="img" :label="img">
                          <img :src="img" alt="">
                        </el-radio>
                    </el-radio-group>
                </el-tab-pane>
                <el-tab-pane label="自己上传" name="upload">
                    <app-upload 
                      :action="$store.state.url.uploadImage" 
                      list-type="picture-card" 
                      :form-data="form" form-key="homePageUrl" :max-num="1">
                    </app-upload>
                </el-tab-pane>
          </el-tabs>
        </el-form-item>
      </div>

      <div class="sub-title">服务信息</div>
      <div class="sub-form">
        <el-form-item label="请填写您的收费标准">
          <div class="number-range form-block">
              <el-form-item prop="serviceMinMoney">
                <el-input type="number" v-model="form.serviceMinMoney" placeholder="最低价"></el-input>
              </el-form-item>
              &ensp;-&ensp;
              <el-form-item prop="serviceMaxMoney">
                <el-input type="number" v-model="form.serviceMaxMoney" placeholder="最高价">
                  <span slot="append">
                    元/m<sup>2</sup>
                  </span>
                </el-input>
              </el-form-item>
          </div>
        </el-form-item>
        <el-form-item label="请填写您的预约诚意金额" prop="earnestMoney" style="width: 170px;">
          <el-input type="number" v-model.number="form.earnestMoney" placeholder="请输入">
            <span slot="append">元</span>
          </el-input>
        </el-form-item>
        <el-form-item label="请选择您的服务类别，可多选" prop="serviceType">
          <el-checkbox-group v-model="form.serviceType" class="form-block form-checkbox">
            <el-checkbox label="餐厅设计" border></el-checkbox>
            <el-checkbox label="娱乐空间" border></el-checkbox>
            <el-checkbox label="休闲会所" border></el-checkbox>
            <el-checkbox label="主题酒店" border></el-checkbox>
            <el-checkbox label="购物中心" border></el-checkbox>
            <el-checkbox label="办公室设计" border></el-checkbox>
          </el-checkbox-group>
        </el-form-item>

        <el-form-item label="您是否可以提供远程设计服务？" prop="longRangeService">
          <el-radio-group v-model="form.longRangeService" class="form-block">
            <el-radio :label="true" border>可以</el-radio>
            <el-radio :label="false" border>不可以</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item class="form-submit">
          <el-button type="primary" @click="postProfile">提交</el-button>
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>

<script>
import appUpload from '../../component/appUpload'
import { queryDesignerInfo, saveOrUpdateDesignerInfo } from '../../api/profile'
export default {
  name: 'workProfile',
  components: {
    appUpload
  },
  data() {
    return {
      form: {
        userName: "",
        designerExperience: "",

        phone: "",
        qqNumber: "",
        address: "",

        desc1: "",
        desc2: "",
        homePageUrl: "",

        serviceMinMoney: "",
        serviceMaxMoney: "",
        earnestMoney: "",
        serviceType: [],
        longRangeService: true
      },
      rules: {
        userName: [{ required: true, message: "请输入", trigger: "blur" }],
        serviceMinMoney: [{ required: true, message: "请输入", trigger: "blur" }],
        serviceMaxMoney: [{ required: true, message: "请输入", trigger: "blur" }],
        earnestMoney: [
          { required: true, type: 'number', message: "请输入", trigger: "blur" },
          { min: 0.01, max: 100, type: 'number', message: '请输入大于0，小于100的金额', trigger: 'blur' }
        ],
        serviceType: [
            { type: 'array', required: true, message: '请至少选择一个', trigger: 'change' }
        ],
      },
      bannerType: 'select', //封面tab类型
      bannerUrls: [
        'https://uege-1258242722.cos.ap-shanghai.myqcloud.com/ygsj/guochunsheng/sjs1.jpeg',
        'https://uege-1258242722.cos.ap-shanghai.myqcloud.com/ygsj/guochunsheng/sjs2.jpeg',
        'https://uege-1258242722.cos.ap-shanghai.myqcloud.com/ygsj/guochunsheng/sjs3.jpeg'
      ],
      editable: true,

      userInfo: {}
    }
  },
  methods: {
    queryProfile(){
      queryDesignerInfo().then(rsp => {
        if(rsp.code === 200 && rsp.data.length === 2 && rsp.data[1]){
          const data = Object.assign({}, rsp.data[1])
          data.serviceType = data.serviceType ? data.serviceType.split(',') : []
          this.form = data
          this.form.userName = rsp.data[0].userName    
          localStorage.userInfo = JSON.stringify(rsp.data[0])
          localStorage.userQrcode = rsp.data[0].qrUrl
          localStorage.designerId = rsp.data[0].id
        }
      })
    },

    postProfile(){
      this.$refs.form.validate((valid) => {
        if (valid) {
            const data = Object.assign({}, this.form)
            data.serviceType = data.serviceType.join(',')
            data.designerId = this.userInfo.id
            data.userName = this.userInfo.userName
            saveOrUpdateDesignerInfo(data).then(rsp => {
              if(rsp.code === 200){
                this.$message.success('提交成功')
                this.queryProfile()
              }
            })
        } else {
            console.log('error submit!!');
            return false;
        }
      })
    }
  },
  created(){
    this.userInfo = JSON.parse(localStorage.userInfo)

    this.queryProfile() 
  }
};
</script>

<style lang="less">
.page-work-my-profile {
  padding-bottom: 50px;
  .el-form {
    padding: 0 100px;
    .el-form-item.is-required:not(.is-no-asterisk)
      > .el-form-item__label:before {
      content: "·";
      vertical-align: middle;
      font-size: 300%;
      margin-left: -24px;
      line-height: 1;
    }
    .notetext {
      margin-top: -10px;
      font-size: 12px;
      color: #ccc;
    }
    .sub-title {
      margin: 30px 0 15px -30px;
      font-size: 18px;
      &:first-child {
        margin-top: 0;
      }
    }
    .form-checkbox{
      margin: 0 -10px;
      .el-checkbox{
        margin: 10px;
      }
    }
    .radio-img-group{
      display: flex;
      .el-radio{
        display: block;
        flex: 1;
        & + .el-radio{
          margin-left: 15px;
        }
        position: relative;
        &.is-checked{

        }
        .el-radio__input{
          position: absolute;
          top: 10px;right: 10px;
        }
        .el-radio__label{
          display: block;
          img{
            display: block;
            height: 112px;
            width: 100%;
          }
        }
      }
    }
    .sub-form {
      .form-block {
        display: block;
        width: 100%;
        clear: both;
      }
      .number-range{
          display: flex;
          align-items: center;
          .el-form-item{
              width: 114px;
              margin-bottom: 0;
              &:last-child{
                  width: 200px;
              }
          }
      }
    }
    .form-submit {
      margin-top: 30px;
      text-align: right;
      .el-button {
        width: 10em;
      }
    }
  }
}
</style>

